<template>
  <div class="login">
     <div class="title">music 后台管理系统</div>
     <div class="penal">
       <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
         <el-form-item prop="username">
           <el-input v-model="ruleForm.username" placeholder="请输入账号" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item prop="password">
           <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码 " autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" style="width: 90%" @click="submitForm">登录</el-button>
         </el-form-item>
       </el-form>
     </div>
  </div>
</template>

<script>
import {mixin} from "../mixins/index";
import {getLoginStatus} from "../api/index";
export default {
  mixins:[mixin],
  data() {
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.password !== '') {
          this.$refs.ruleForm.validateField('password');
        }
        callback();
      }
    };
    return {
      ruleForm: {
        username: 'admin',
        password: '1',
      },
      rules: {
        username: [
          {required: true, message: '请输入账号', trigger: 'blur'},
        ],
        password: [
          {validator: validatePass, message: "请输入密码", trigger: 'blur'}
        ]
      }
    }
      },
  methods:{
    submitForm(){
      let params = new URLSearchParams();
      params.append("name",this.ruleForm.username)
      params.append("password",this.ruleForm.password)
      getLoginStatus(params).then((res)=>{
        if(res.code == 1){
          //自动获取登录的用户名
           localStorage.setItem("userName",this.ruleForm.username);
          this.$router.push("/info")
          this.notify("登录成功","success");
        }else{
          this.notify("登录失败","error");
        }
      })
    },
  }
}
</script>

<style scoped>
.login{
  position: absolute;
  background: url("../assets/img/background.jpg") center center;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 700px;
}
.title{
  position: absolute;
  top: 30%;

  width: 100%;
  text-align: center;
  font-weight: 600;
  font-size: 26px;
  color: #ffffff;
}
.penal{
  position: relative;
  width: 300px;
  height: 160px;
  top: 260px;
  left: 39%;
  border-radius: 5px;
  border: 1px solid #fff;
  text-align: center;
  padding: 20px;
}
.footer{
  position: absolute;
  right: 10px;
  color: #00BFFF;
  cursor: pointer;
}

</style>
